@using AntDesign.Charts
@using Title = AntDesign.Charts.Title

<Tabs>
    <TabPane Key="1">
        <Tab>示例1</Tab>
        <ChildContent>
            <GroupedColumn Data="data1" Config="config1"/>
        </ChildContent>
    </TabPane>
</Tabs>

@code{

    #region 示例1

    readonly object[] data1 =
    {
        new
        {
            name = "London",
            月份 = "Jan.",
            月均降雨量 = 18.9
        },
        new
        {
            name = "London",
            月份 = "Feb.",
            月均降雨量 = 28.8
        },
        new
        {
            name = "London",
            月份 = "Mar.",
            月均降雨量 = 39.3
        },
        new
        {
            name = "London",
            月份 = "Apr.",
            月均降雨量 = 81.4
        },
        new
        {
            name = "London",
            月份 = "May",
            月均降雨量 = 47
        },
        new
        {
            name = "London",
            月份 = "Jun.",
            月均降雨量 = 20.3
        },
        new
        {
            name = "London",
            月份 = "Jul.",
            月均降雨量 = 24
        },
        new
        {
            name = "London",
            月份 = "Aug.",
            月均降雨量 = 35.6
        },
        new
        {
            name = "Berlin",
            月份 = "Jan.",
            月均降雨量 = 12.4
        },
        new
        {
            name = "Berlin",
            月份 = "Feb.",
            月均降雨量 = 23.2
        },
        new
        {
            name = "Berlin",
            月份 = "Mar.",
            月均降雨量 = 34.5
        },
        new
        {
            name = "Berlin",
            月份 = "Apr.",
            月均降雨量 = 99.7
        },
        new
        {
            name = "Berlin",
            月份 = "May",
            月均降雨量 = 52.6
        },
        new
        {
            name = "Berlin",
            月份 = "Jun.",
            月均降雨量 = 35.5
        },
        new
        {
            name = "Berlin",
            月份 = "Jul.",
            月均降雨量 = 37.4
        },
        new
        {
            name = "Berlin",
            月份 = "Aug.",
            月均降雨量 = 42.4
        }
    };

    readonly GroupedColumnConfig config1 = new GroupedColumnConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "分组柱状图"
        },
        ForceFit = true,
        XField = "月份",
        YField = "月均降雨量",
        YAxis = new ValueAxis
        {
            Min = 0
        },
        Label = new ColumnViewConfigLabel
        {
            Visible = true
        },
        GroupField = "name",
        Color = new[] {"#1ca9e6", "#f88c24"}
    };

    #endregion 示例1

}